import React from "react";
import {
  View,
  Text,
  Picker,
  TouchableOpacity,
  Platform,
  DatePickerAndroid,
  ScrollView
} from "react-native";

import Config from "../../config";
import SizeUtils from "../../common/SizeUtils";
import BasePage from "./BasePage";
import CommonShowPickerAction from "../../actions/common/CommonShowPickerAction";

const NO_DATA_STR = "未选择";

//例如像爱情事的基础资料一样的资料编辑列表界面
export default class CommonDataEditListPage extends BasePage {
  constructor(props) {
    super(props);

    this.state.viewStatus = 0;
    this.state.updateDataMark = 0;
    this._isShowSubmit = false;
    this._submitText = "";
    this._showNeedMark = this.props.pageData.routeData.showNeedMark != false;
    this._scrollViewBackgroundColor = "#ffffff";
    this._gotoEdit = false;
    this._initPageButtonValues();
  }

  _initPageButtonValues() {
    this._pageButtonValues = {};
    // let dataJson = this._getPageDatas();
    // let dataArr = [];
    //
    // for (var key in dataJson) {
    //   if (dataJson.hasOwnProperty(key)) {
    //     dataArr.push(dataJson[key]);
    //   }
    // }
    // dataArr.map(
    //   (data, index) => {
    //     if(data.type === "picker" || data.type === "intervalPicker") {
    //       this._pageButtonValues[data.key] = data.params[0];
    //     }
    //   }
    // )
  }

  _dealEnterPage() {
    if (this._updateByCallback) {
      this._updateByCallback = false;
      return;
    }
    if (this._gotoEdit === true) {
      this._gotoEdit = false;
      return;
    }
    this.state.viewStatus = 0;
    this._showNeedMark = this.props.pageData.routeData.showNeedMark != false;
    this._initPageButtonValues();
  }

  render() {
    if (this.state.leave === true) {
      return this._renderEmptyView();
    }
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: this._scrollViewBackgroundColor
        }}
      >
        <ScrollView
          style={{
            flex: 1,
            // width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(40),
            paddingTop: this.props.isInster ? 0 : Config.paddingTop,
            paddingLeft: SizeUtils.translateDesignWidthToCode(40),
            paddingRight: SizeUtils.translateDesignWidthToCode(40),
            height:
              SizeUtils.getWindowSize().height -
              (Platform.OS === "ios"
                ? this.props.isInster ? 0 : Config.paddingTop
                : SizeUtils.translateDesignHeightToCode(130))
          }}
        >
          {this._renderHeader()}
          {this._renderPageButtons()}
          {this._renderPageBottom()}
        </ScrollView>
        {this.props.isInster ? null : this._renderNavigationBar()}
        {this._renderSubmitButton()}
      </View>
    );
  }
  _renderPageBottom(){
    
  }
  _renderSubmitButton() {
    if (this._isShowSubmit != true) {
      return;
    }
    return (
      <TouchableOpacity
        style={{
          position: "absolute",
          bottom: 0,
          width: SizeUtils.getWindowSize().width,
          height: SizeUtils.translateDesignHeightToCode(100),
          backgroundColor: this._checkSubmitBtnDisabled()
            ? "#666666"
            : "#db3132",
          justifyContent: "center",
          alignItems: "center"
        }}
        disabled={this._checkSubmitBtnDisabled()}
        onPress={this._onPressSubmit.bind(this)}
      >
        <Text
          style={{
            fontSize: SizeUtils.translateFontSizeToCode(36),
            color: "#ffffff"
          }}
        >
          {this._submitText}
        </Text>
      </TouchableOpacity>
    );
  }

  _checkSubmitBtnDisabled() {
    return false;
  }

  _onPressSubmit() {}

  _renderHeader() {}

  _renderPageButtons() {
    let dataJson = this._getPageDatas();
    let dataArr = [];

    for (var key in dataJson) {
      if (dataJson.hasOwnProperty(key)) {
        dataArr.push(dataJson[key]);
      }
    }
    return (
      <View>
        {dataArr.map((data, index) => {
          return this._renderPageButton(data, index);
        })}
        <View style={{ height: SizeUtils.translateDesignHeightToCode(30) }} />
      </View>
    );
  }

  _getPageDatas() {}

  _renderIOSPageButton(data, index, useCommon) {
    return (
      <TouchableOpacity
        key={index}
        style={{
          flexDirection: "row",
          alignItems: "center",
          borderBottomWidth: SizeUtils.translateDesignNumToCode(3),
          borderColor: "#eeeeee",
          paddingTop: SizeUtils.translateDesignHeightToCode(26),
          paddingBottom: SizeUtils.translateDesignHeightToCode(26),
        }}
        onPress={() => this._onPressPageButton(data, useCommon)}
      >
        <View style={{ flexDirection: "row", alignItems: "center" }}>
          <Text
            style={{
              fontSize: SizeUtils.translateFontSizeToCode(32),
              color: "#66686B"
            }}
          >
            {this._getPageButtonName(data)}
          </Text>
        </View>
        <View
          style={{
            flex: 1,
            paddingLeft: SizeUtils.translateDesignWidthToCode(80),
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "flex-end"
          }}
        >
          <Text
            numberOfLines={1}
            style={{
              fontSize: SizeUtils.translateFontSizeToCode(28),
              color: "#66686B"
            }}
          >
            {this._getPageButtonValue(data)}
          </Text>
          <Text
            numberOfLines={1}
            style={{
              fontSize: SizeUtils.translateFontSizeToCode(28),
              color: "#66686B"
            }}
          >
            {this.props.pageData.routeData.editable === false ? "" : ">"}
          </Text>
        </View>
      </TouchableOpacity>
    );
  }

  _renderPageButton(data, index, useCommon) {
    if (
      Platform.OS === "ios" ||
      (data.type !== "picker" &&
        data.type !== "datePicker" &&
        data.type !== "intervalPicker" &&
        data.type !== "intervalPicker1")
    ) {
      return this._renderIOSPageButton(data, index, useCommon);
    } else {
      return this._renderAndroidPageButton(data, index, useCommon);
    }
  }

  _renderAndroidPageButton(data, index) {
    if (data.type === "picker") {
      let params = data.params.concat();
      params.unshift(NO_DATA_STR);
      return (
        <View
          key={index}
          style={{
            height: SizeUtils.translateDesignHeightToCode(130),
            borderColor: "#eeeeee",
            flexDirection: "row",
            alignItems: "center",
            borderBottomWidth: SizeUtils.translateDesignNumToCode(3)
          }}
        >
          <Text
            style={{
              textAlign: "center",
              alignItems: "center",
              fontSize: SizeUtils.translateFontSizeToCode(32)
            }}
          >
            {this._getPageButtonName(data) + ":"}
          </Text>
          <View style={{ width: SizeUtils.translateDesignWidthToCode(300) }}>
            <Picker
              style={{ backgroundColor: "#ffffff00" }}
              selectedValue={this._getPageButtonValueForAndroidPicker(
                data,
                params
              )}
              mode="dialog"
              prompt={"请选择"}
              enabled={this.props.pageData.routeData.editable}
              onValueChange={value =>
                this._editCallbackByAndroidPicker(data, value, params)}
            >
              {params.map((item, index) => {
                return (
                  <Picker.Item
                    style={{
                      height: SizeUtils.translateDesignHeightToCode(35),
                      fontSize: SizeUtils.translateFontSizeToCode(30),
                      color: "#eeeeee"
                    }}
                    key={index}
                    value={index}
                    label={item}
                  />
                );
              })}
            </Picker>
          </View>
        </View>
      );
    }
    if (data.type === "datePicker") {
      return (
        <DatePickerAndroid
          date={this._getPageButtonValue(data)}
          mode="date"
          onDateChange={value => this._editCallback(data, value)}
          enabled={this.props.pageData.routeData.editable}
        />
      );
    }

    if (data.type === "intervalPicker" || data.type === "intervalPicker1") {
      let params = [NO_DATA_STR];
      // let params = [];
      for (var i = data.params[0]; i <= data.params[1]; i++) {
        params.push(i + "");
      }
      return (
        <View
          key={index}
          style={{
            height: SizeUtils.translateDesignHeightToCode(130),
            borderColor: "#eeeeee",
            flexDirection: "row",
            alignItems: "center",
            borderBottomWidth: SizeUtils.translateDesignNumToCode(3)
          }}
        >
          <Text
            style={{
              textAlign: "center",
              alignItems: "center",
              fontSize: SizeUtils.translateFontSizeToCode(32)
            }}
          >
            {this._getPageButtonName(data) + ":"}
          </Text>
          <View style={{ width: SizeUtils.translateDesignWidthToCode(300) }}>
            <Picker
              style={{ backgroundColor: "#ffffff00" }}
              selectedValue={this._getPageButtonValueForAndroidPicker(
                data,
                params
              )}
              mode="dialog"
              prompt={"请选择"}
              enabled={this.props.pageData.routeData.editable}
              onValueChange={value =>
                this._editCallbackByAndroidPicker(data, value, params)}
            >
              {params.map((item, index) => {
                return (
                  <Picker.Item
                    style={{
                      fontSize: SizeUtils.translateFontSizeToCode(30),
                      color: "#eeeeee"
                    }}
                    key={index}
                    value={index}
                    label={item}
                  />
                );
              })}
            </Picker>
          </View>
        </View>
      );
    }
  }

  _getPageButtonName(data) {
    return (data.isNeed === true && this._showNeedMark ? "*" : "") + data.name;
  }

  _getPageButtonValue(data) {
    if (data.key == "workerNum") {
      if (this._pageButtonValues["workerNum"] === undefined||this._pageButtonValues["workerNum"].length===0) {
        return "未填写";
      }
    }
    if (data.key == "height") {
      if (this._pageButtonValues["min_height"] === undefined) {
        return "不限";
      }
      return (
        this._pageButtonValues["min_height"] +
        " - " +
        this._pageButtonValues["max_height"]
      );
    }
    if (data.key == "weight") {
      if (this._pageButtonValues["min_weight"] === undefined) {
        return "不限";
      }
      return (
        this._pageButtonValues["min_weight"] +
        " - " +
        this._pageButtonValues["max_weight"]
      );
    }
    if (data.key == "age") {
      if (this._pageButtonValues["min_age"] === undefined) {
        return "不限";
      }
      return (
        this._pageButtonValues["min_age"] +
        " - " +
        this._pageButtonValues["max_age"]
      );
    }
    return this._pageButtonValues[data.key];
  }

  _getPageButtonValueForAndroidPicker(data, params) {
    if (this._pageButtonValues[data.key] === undefined) {
      return 0;
    } else {
      let value = this._pageButtonValues[data.key];
      let index = params.indexOf(value + "");
      return index >= 0 ? index : 0;
    }
  }

  _onPressPageButton(data) {
    // console.log("_onPressPageButton", data, data.key, data.value);
    if (this._checkIsPicker(data)) {
      if (this.props.pageData.routeData.editable === false) {
        return;
      }
      if (data.type === "picker") {
        // new CommonShowPickerAction().call(this, {pickerData:data.params, callback:(value) => {this._editCallback(data, value)}});
        this._showPick({ pickerData: data.params.concat() }, data);
      } else if (data.type === "datePicker") {
        // new CommonShowPickerAction().call(this, {type:"date", callback:(value) => {this._editCallback(data, value)}});
        this._showPick({ type: "date" }, data);
      } else if (data.type == "intervalPicker") {
        let params = [];
        for (var i = data.params[0]; i <= data.params[1]; i++) {
          params.push(i + "");
        }
        // new CommonShowPickerAction().call(this, {pickerData:params, callback:(value) => {this._editCallback(data, value)}});
        this._showPick({ pickerData: params, extends1: data.extends1 }, data);
      } else if (data.type == "intervalPicker1") {
        let params = [];
        for (var i = data.params[0]; i <= data.params[1]; i++) {
          params.push(i + "");
        }
        // new CommonShowPickerAction().call(this, {pickerData:params, callback:(value) => {this._editCallback(data, value)}});
        this._showPick(
          {
            pickerData: params,
            pickerData2: params,
            extends1: data.extends1,
            extends2: data.extends2
          },
          data
        );
      }
    } else {
      this._gotoEdit = true;
      this.gotoPage(Config.pages.common_input, {
        title: data.name,
        length: data.params.length,
        fields:data.fields,
        default:
          this._pageButtonValues[data.key] === null ||
          this._pageButtonValues[data.key] === undefined
            ? ""
            : this._pageButtonValues[data.key],
        type: data.type,
        editable: this.props.pageData.routeData.editable != false,
        callback: value => {
          this._editCallback(data, value);
        }
      });
    }
  }

  _showPick(params, data) {
    new CommonShowPickerAction().call(this, {
      ...params,
      callback: (value, value1) => {
        this._editCallback(data, value, value1);
      }
    });
  }

  _checkIsPicker(data) {
    return (
      data.type === "picker" ||
      data.type === "datePicker" ||
      data.type === "intervalPicker" ||
      data.type === "intervalPicker1"
    );
  }

  _editCallback(data, value, value1) {
    if (data.key === "height") {
      this._pageButtonValues["min_height"] = value;
      this._pageButtonValues["max_height"] = value1;
    } else if (data.key === "age") {
      this._pageButtonValues["min_age"] = value;
      this._pageButtonValues["max_age"] = value1;
    } else if (data.key === "weight") {
      this._pageButtonValues["min_weight"] = value;
      this._pageButtonValues["max_weight"] = value1;
    } else {
      this._pageButtonValues[data.key] = value;
    }
    this._dealEditCallbackCommon();
  }

  // 安卓这里不能重新渲染
  _editCallbackByAndroidPicker(data, value, params) {
    let valueStr = params[value];
    if (valueStr === NO_DATA_STR) {
      this._pageButtonValues[data.key] = undefined;
    } else {
      this._pageButtonValues[data.key] = valueStr;
    }
    this._dealEditCallbackCommon();
  }

  _dealEditCallbackCommon() {
    this._updateByCallback = true;
    this.setState({
      updateDataMark: this.state.updateDataMark + 1
    });
  }
}
